<script lang="ts" setup>
  import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
  import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

  // amusement-list
  const listData: Record<string, string>[] = [];

  for (let i = 0; i < 23; i++) {
    listData.push({
      href: 'https://www.antdv.com/',
      title: `标题标题标题标题标题标题..`,
      avatar: 'https://joeschmoe.io/api/v1/random',
      description:
        '标题标题标题标题标题标题标题..',
      content:
        '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
    });
  }

  const pagination = {
    onChange: (page: number) => {
      console.log(page);
    },
    pageSize: 4,
  };
  const actions: Record<string, any>[] = [
    { icon: StarOutlined, text: '156' },
    { icon: LikeOutlined, text: '156' },
    { icon: MessageOutlined, text: '2' },
  ];

  // 侧面重点展开栏 side-list
  const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻',
    '重点新闻'
  ];
</script>

<template>
  <div class="amu-list">
    <div class="main-list">
      <div class="carousel">
        <a-carousel arrows>
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
              <left-circle-outlined />
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px">
              <right-circle-outlined />
            </div>
          </template>
          <div><a href=""><img src="" alt="封面1"></a></div>
          <div><a href=""><img src="" alt="封面2"></a></div>
          <div><a href=""><img src="" alt="封面3"></a></div>
          <div><a href=""><img src="" alt="封面4"></a></div>
        </a-carousel>
      </div>

      <div class="amusement-list">
        <a-list item-layout="vertical" size="small" :pagination="pagination" :data-source="listData">
          <template #footer>
            <div>
              <b>ant design vue</b>
              footer part
            </div>
          </template>
          <template #renderItem="{ item }">
            <a-list-item key="item.title">
              <template #actions>
          <span v-for="{ icon, text } in actions" :key="icon">
            <component :is="icon" style="margin-right: 8px" />
            {{ text }}
          </span>
              </template>
              <template #extra>
                <img
                  width="272"
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              </template>
              <a-list-item-meta :description="item.description">
                <template #title>
                  <a :href="item.href">{{ item.title }}</a>
                </template>
                <template #avatar><a-avatar :src="item.avatar" /></template>
              </a-list-item-meta>
              {{ item.content }}
            </a-list-item>
          </template>
        </a-list>
      </div >
    </div>

    <div class="side-list">
      <a-list bordered :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>{{ item }}</a-list-item>
        </template>
        <template #header>
          <div class="r-header">热点新闻</div>
        </template>
      </a-list></div>
  </div>
</template>

<style scoped>
.carousel{
  width: 66%;
  margin: 0 auto;
  margin-bottom: 3rem;

  /* For demo */
  :deep(.slick-slide) {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
  }

  :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    transition: ease all 0.3s;
    opacity: 0.3;
    z-index: 1;
  }
  :deep(.slick-arrow.custom-slick-arrow:before) {
    display: none;
  }
  :deep(.slick-arrow.custom-slick-arrow:hover) {
    color: #fff;
    opacity: 0.5;
  }

  :deep(.slick-slide h3) {
    color: #fff;
  }
}
.amusement-list{
  width: 80%;
  margin: 0 auto;
}

.side-list{
  width: 33%;
  margin: 0 auto;

  .r-header{
    text-align: center;
    font-size: 24px;
    color: blue;
  }
}
.main-list{
  width: 60%;
}
.amu-list{
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  height: 1280px;
}

@media (max-width: 1024px) {
  .side-list{
    display: none;
  }

  .main-list{
    width: 100%;
  }

  .amu-list{
    margin-top: 3rem;
    height: 1280px;
  }
}
</style>
